<template>
  <div class="container">
    <div v-if="visible" class="close" @click="$emit('close')">关闭</div>
    <div class="search">
      <input v-if="visible" type="text" id="search-input" placeholder="请输入地址" />
      <div id="tip-box"></div>
    </div>
    <div id="map" />
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'map-container',
  data () {
    return {
      map: null,
      visible: false
    }
  },
  mounted () {
    this.initAMap()
  },
  beforeDestroy () {
    if (this.map) {
      this.map.destroy()
      this.map = null
    }
  },
  methods: {
    initAMap () {
      window._AMapSecurityConfig = {
        securityJsCode: '56cd5b77b45d59a24bbc43a0bc4b4e6c'
      }
      AMapLoader.load({
        // 申请好的Web端开发者Key，首次调用 load 时必填
        key: '26e6677b5e837f6fd87b0bc587415d4a',
        // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        version: '2.0',
        // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        plugins: ['AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder']
      }).then((AMap) => {
        this.visible = true
        // 设置地图容器id
        this.map = new AMap.Map('map', {
          // 是否为3D地图模式
          viewMode: '2D',
          // 初始化地图级别
          // zoom: 11,
          resizeEnable: true,
          // 初始化地图中心点位置
          center: [116.397428, 39.90923]
        })
        this.map.addControl(new AMap.Scale()) // 添加比例尺控件
        this.map.addControl(new AMap.Geolocation()) // 添加定位控件
        const placeSearch = new AMap.PlaceSearch({  // 构造地点搜索服务对象
          map: this.map
        })
        const auto = new AMap.Autocomplete({  // 构造地点输入建议服务对象
          input: 'search-input',
          output: 'tip-box'
        }).on('select', (e) => {  // 输入建议选择事件监听
          placeSearch.setCity(e.poi.adcode)
          placeSearch.search(e.poi.name)
        })

        // 构造逆地理编码组件
        const geocoder = new AMap.Geocoder({
          // city: '010', // 城市设为北京，默认：“全国”
          // radius: 1000 //范围，默认：500
        })

        // 给地图添加点击事件
        this.map.on('click', (e) => {
          geocoder.getAddress(e.lnglat, (status, result) => {
            if (status === 'complete' && result.regeocode) {
              const address = result.regeocode.formattedAddress
              console.log(result)
              this.$emit('getAddress', { address })
              this.$emit('close')
            }
          })
        })
      }).catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  //居中
  transform: translate(-50%, -50%);
  z-index: 99990;
  width: 80%;
  height: 80%;
  #map {
    width: 100%;
    height: 100%;
  }
  .close {
    padding: 5px 10px;
    position: absolute;
    z-index: 99991;
    right: 0;
    top: 0;
    font-size: 16px;
    background-color: #dfdfdf;
    cursor: pointer;
    &:hover {
      background-color: #c0c0c0;
    }
  }
  .search {
    position: absolute;
    z-index: 99991;
    right: 70px;
    top: 15px;
    width: 300px;
    font-size: 14px;
    #search-input {
      width: 100%;
      height: 30px;
      line-height: 30px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 0 10px;
    }
    #tip-box {
      margin-top: 5px;
      border-radius: 5px;
      background-color: #FFFFFF;
    }
  }
}
</style>
